<template>
	<view class="container">
		<view class="padding-sm bg-white">
			<view class="text-13 text-bold text-333">
				上传产品图片
			</view>
			<view class="cu-form-group padding-top">
				<view class="grid col-3 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in pic" :key="index">
						<image :src="item" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-type='1' :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage(1)" v-if="imgList.length<3">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
		</view>
		<view class="solid-bottom bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				商品名称
			</view>
			<input type="text" v-model="name" value="" class="text-13 flex-treble" placeholder="请填写商品名称" />
		</view>
		<view class="solid-bottom text-13  margin-bottom padding bg-white">
			<view style="display: flex;justify-content: space-between;width: 100%;">
				<view class="text-333 text-bold">
					商品分类
				</view>
				<view class="flex justify-start align-center" @click="$refs.tkitree._show()">
					<view class="text-767696 margin-right-xs">
						请选择
					</view>
					<image :src="baseUrl + '/static/images/right.png'" mode="" style="width: 22rpx;height: 22rpx;">
					</image>
				</view>
			</view>

			<view class="flex flex-wrap margin-top-xs ">
				<block>
					<view style="padding: 18rpx 28rpx;" class="bg-F4F4F4 round margin-left-xs text-df margin-top-sm color t-btn"
						v-for="item in checkeds">
						{{item.name}}
					</view>

				</block>


			</view>
		</view>

		<view class="solid-bottom bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				商品价格
			</view>
			<view class="flex-treble text-13 flex justify-between align-center">
				<input type="text" v-model="price" value="" class="text-13 f-grow1" placeholder="请填写商品价格" />
				<view class="color">
					元
				</view>
			</view>

		</view>
		<view class="solid-bottom bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				市场价格
			</view>
			<view class="flex-treble text-13 flex justify-between align-center">
				<input type="text" v-model="originalPrice" value="" class="text-13 f-grow1" placeholder="请填写市场单价" />
				<view class="color">
					元
				</view>
			</view>
		
		</view>
		<view class="margin-bottom-sm bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				库存
			</view>
			<input type="text" v-model="stock" value="" class="text-13 flex-treble" placeholder="请填写库存数" />
		</view>
		<!-- <view class="margin-bottom-sm bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				是否上架
			</view>
			<radio-group class="flex-treble flex justify-around align-center" @change="publishChange">
				<view class="flex justify-start align-center">
					<radio class="radio yellow" :class="publishStatus=='1'?'bg-white':''"
						:checked="publishStatus=='1'?true:false" value="1"></radio>
					<view class="title text-13 margin-left-xs">上架</view>
				</view>
				<view class="flex justify-start align-center">
					<radio class="radio yellow" :class="publishStatus=='0'?'checked':''"
						:checked="publishStatus=='0'?true:false" value="0"></radio>
					<view class="title text-13 margin-left-xs">下架</view>
				</view>
			</radio-group>
		</view> -->
		<view class="solid-bottom bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				是否安装
			</view>
			<radio-group class="flex-treble flex justify-around align-center" @change="installChange">
				<view class="flex justify-start align-center">
					<radio class="radio yellow" :class="installStatus=='1'?'bg-white':''"
						:checked="installStatus=='1'?true:false" value="1"></radio>
					<view class="title text-13 margin-left-xs">是&nbsp;&nbsp;&nbsp;&nbsp;</view>
				</view>
				<view class="flex justify-start align-center">
					<radio class="radio yellow" :class="installStatus=='0'?'checked':''"
						:checked="installStatus=='0'?true:false" value="0"></radio>
					<view class="title text-13 margin-left-xs">否&nbsp;&nbsp;&nbsp;&nbsp;</view>
				</view>
			</radio-group>
		</view>
		<block  v-if='installStatus==1'>
			<view class="solid-bottom bg-white text-13 flex justify-between align-center padding">
				<view class="text-333 flex-sub text-bold">
					安装费
				</view>
				<view class="flex-treble text-13 flex justify-between align-center">
					<input v-model="installPrice" type="text" value="" class="text-13 f-grow1" placeholder="请填写安装费" />
					<view class="color">
						元
					</view>
				</view>
			</view>
			<view 
				class="margin-bottom-sm bg-white text-13 flex justify-between align-center padding">
				<view class="text-333 flex-sub text-bold">
					配送费
				</view>
				<view class="flex-treble text-13 flex justify-between align-center">
					<input v-model="courierPrice" type="text" value="" class="text-13 f-grow1" placeholder="请填写配送费" />
					<view class="color">
						元
					</view>
				</view>
			</view>
			<view class="solid-bottom bg-white text-13 flex justify-between align-center padding">
				<view class="text-333 flex-sub text-bold">
					重量
				</view>
				<view class="flex-treble text-13 flex justify-between align-center">
					<input v-model="weight" type="text" value="" class="text-13 f-grow1" placeholder="请输入重量" />
					<view class="color">
						kg
					</view>
				</view>
			</view>
		</block>
		
		<view class="solid-bottom bg-white text-13 flex justify-between align-center padding">
			<view class="text-333 flex-sub text-bold">
				推荐爆品
			</view>
			<radio-group class="flex-treble flex justify-center align-center" @change="RadioChange">
				<view class="flex justify-start align-center">
					<radio class="radio yellow" :class="recommandStatus=='1'?'bg-white':''"
						:checked="recommandStatus=='1'?true:false" value="1"></radio>
					<view class="title text-13 margin-left-xs">是</view>
				</view>
				<view class="flex justify-start align-center" style="margin-left: 120rpx;">
					<radio class="radio yellow" :class="recommandStatus=='0'?'checked':''"
						:checked="recommandStatus=='0'?true:false" value="0"></radio>
					<view class="title text-13 margin-left-xs">否</view>
				</view>
			</radio-group>
		</view>
		<!-- <view class="solid-bottom text-13 flex justify-between align-center padding bg-white">
			<view class="text-333 text-bold">
				请选择爆品显示位置
			</view>
			<view class="flex justify-start align-center">
				<view class="text-767696 margin-right-xs">
					请选择
				</view>
				<image :src="baseUrl + '/static/images/right.png'" mode="" style="width: 22rpx;height: 22rpx;"></image>
			</view>
		</view> -->
		<view class="bg-white padding margin-top-sm">
			<view class="text-333">
				商品详情
			</view>
			<textarea value="" v-model="description" class="text-13 width-sub margin-top-sm"
				placeholder="在这里填写商品详情信息" />
		</view>
		<view class="padding bg-white margin-top-sm">
			<view class="text-13 text-bold text-333">
				上传商品详情图片
			</view>
			<view class="cu-form-group" style="margin-top: 48rpx;">
				<view class="grid col-3 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in albumPics" :key="index">
						<image :src="item.url" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-type='2' :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage(2)" v-if="imgList.length<3">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
		</view>
		<button class="padding bg-color text-white margin radius10 text-15" @click="submits">确定</button>
		<tki-tree @confirm='handChecked' ref="tkitree"  idKey='id' :range="typeList" rangeKey="name"
			confirmColor="#4e8af7" />
	</view>
</template>

<script>
	import tkiTree from "@/components/tki-tree/tki-tree.vue"
	export default {
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				imgList: [],
				radio: '',
				typeList: [],
				albumPics: [], //商品详情图片
				firstCategoryId:'',
				secondCategoryId: '', //二级分类
				name: '', //商品名字    
				price: '', //商品价格
				stock: '', //库存
				publishStatus: '', //是否上架
				installStatus: '', //是否需要安装	
				installPrice: '', //安装费用
				recommandStatus: '', //推荐爆品
				courierPrice: '', //配送费用
				pic:[], //商品封面,
				description: '',
				checkeds: [],
				shopId: '',
				shopType: '',
				originalPrice:'' ,//市场价，
				weight:'' //重量

			};
		},
		onLoad(options) {
			console.log(options)
			this.shopId = options.id
			this.shopType = options.type

			console.log(this.shopId, this.shopType)
			this.getProducType()
			// this.$refs.tkitree._show()
		},
		methods: {
			async ChooseImage(index) {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch(req => {
							if (index == 1) {
								this.pic =[]
								this.pic.push(req.data)
							}
							if (index == 2) {
								let obj ={}
								obj['url'] = req.data
								this.albumPics.push(obj)
							}
						})
					}
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {

							if (e.currentTarget.dataset.type == 1) {
								this.pic.splice(e.currentTarget.dataset.index, 1)
							}
							if (e.currentTarget.dataset.type == 2) {
								this.albumPics.splice(e.currentTarget.dataset.index, 1)
							}
						}
					}
				})
			},
			toPage(url) {
				this.$util.openNewPage(url)
			},
			RadioChange(e) {
				this.recommandStatus = e.detail.value
			},
			publishChange(e) {
				this.publishStatus = e.detail.value
			},
			installChange(e) {
				this.installStatus = e.detail.value
				console.log(this.installStatus)
			
				
			},
			handChecked(data) {
				console.log(data)
				this.secondCategoryId = data[0].id
				this.firstCategoryId = data[0].parentId
				this.checkeds = data
				console.log(this.secondCategoryId,this.firstCategoryId)
				// console.log(data)
				// for (let i in data) {
				// 	this.secondCategoryId.push(data[i].id)
				// }
			},
			async getProducType() {
				const data = {
					type: 1
				}
				const [err, rs] = await this.$get(this.$api.home_categoryTreeList, data)
				if (rs) {
					this.typeList = rs.data
				}
			},


			submits() {
				const {
					pic,
					name,
					secondCategoryId,
					price,
					stock,
					publishStatus,
					installStatus,
					recommandStatus,
					installPrice,
					courierPrice,
					albumPics,
					description,
					shopType,
					shopId,
					firstCategoryId,
					weight,
					originalPrice
					
				} = this
				if (pic.length == 0) {
					return this.$util.msg('请上传产品图片')
				}
				if (!name) {
					return this.$util.msg('商品名称不能为空')
				}
				if (!secondCategoryId) {
					return this.$util.msg('商品分类不能为空')
				}
				if (!price) {
					return this.$util.msg('商品价格不能为空')
				}
				if (!originalPrice) {
					return this.$util.msg('市场价格不能为空')
				}
				
				
				if (!stock) {
					return this.$util.msg('库存不能为空')
				}
				// if (publishStatus==='') {
				// 	return this.$util.msg('请选择是否上架')
				// }
				if (installStatus==='') {
					return this.$util.msg('请选择是否安装')
				}
				if (installStatus == 1) {
					if (!installPrice) {
						return this.$util.msg('安装费用不能为空')
					}
					if (!courierPrice) {
						return this.$util.msg('配送费用不能为空')
					}
					if(!weight){
						return this.$util.msg('重量不能为空')
					}

				}
				


				if (recommandStatus==='') {
					return this.$util.msg('请选择是否推荐')
				}
				if (!description) {
					return this.$util.msg('商品详情不能为空')
				}
				if (albumPics.length == 0) {
					return this.$util.msg('商品详情图片不能为空')
				}
				const data = {
					pic:pic.toString(),
					name,
					secondCategoryId,
					firstCategoryId,
					price:price*100,
					stock,
					// publishStatus,
					installStatus,
					recommandStatus,
					albumPics: JSON.stringify(albumPics),
					description,
					shopType,
					shopId,
					originalPrice:originalPrice*100
				}
				if (installStatus == 1) {
					data['installPrice'] = installPrice*100
					data['courierPrice'] = courierPrice*100
					data['weight'] =weight
				}
				this.$jsonPost(this.$api.productAdd, data).then(res => {
					console.log(res)
					const [err, rs] = res
					if (rs) {
						this.$util.msg('添加成功')
						setTimeout(function() {
							uni.navigateBack({

							})
						}, 1000)
					}
				})



			}
		}
	}
</script>

<style lang="scss" scoped>
	.cu-form-group {
		margin-top: 74rpx;
		padding: 0;
	}
</style>
